<template>
  <div class="flex flex-col items-center justify-center">
    <div v-if="userStore.nickname" class="my-music p-12">
      <h1>我的音乐</h1>
      <p>欢迎, {{ userStore.nickname || '访客' }}</p>
      <!-- 这里可以添加音乐列表或其他内容 -->
    </div>
    <div v-else class="bg-gray-100 p-8 rounded-md">
      <span>您还未登录</span>
      <p>
        <n-button type="primary" @click="handleLogin">登录</n-button>
      </p>
    </div>
    <ClientOnly>
      <Login ref="loginRef" />
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import Login from '~/components/Login.vue'
const userStore = useUserStore()
const loginRef = ref<InstanceType<typeof Login> | null>(null)
const handleLogin = () => {
  loginRef.value?.openModal(true)
}
definePageMeta({
  middleware: 'auth'
})
</script>

<style scoped>
.my-music {
  padding: 20px;
}
</style>
